<template>
  <el-dialog v-model="show" title="角色操作" @close="handleClose" width="500px">
    <el-form :model="formData" label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="formData.name" placeholder="请输入角色名称" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="formData.remarks" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { updateRoleApi } from '@/api/auth'
import { ElMessage } from 'element-plus'
const show = ref(false)
const emit = defineEmits(['success'])
const handleClose = () => {
  show.value = false
}
const formData = ref<any>({
  id: 0,
  name: '',
  remarks: '',
})
const handleSubmit = async () => {
  const res: any = await updateRoleApi(formData.value)
  ElMessage.success(res.message)
  handleClose()
  emit('success')
}

const getDetails = (data: any) => {
  //循环获取
  if (data) {
    for (const key in data) {
      if (Object.prototype.hasOwnProperty.call(data, key)) {
        const element = data[key]
        formData.value[key] = element
      }
    }
  }
}

defineExpose({
  open() {
    show.value = true
  },
  setFormData(data: any) {
    getDetails(data)
  },
})
</script>

<style scoped></style>
